<!-- 栏目页面 -->
<template>
    <div id="home">
        <section style=" margin-bottom: 52px;margin-top: 36px;">
            <!-- 歌单推荐 -->
            <ul id="list" class="mui-table-view mui-table-view-chevron">
                <li class="mui-table-view-cell mui-media">
                    <a class="">
                        <div class="mui-media-body">全部</div>
                    </a>
                </li>
            </ul>
            <div class="table" style="border-bottom:5px solid #223748;">
                <div v-for="(v,i) in SongRecommend" :key="i" style="cursor: pointer;" @click="JumpBum(v.specialid)">
                    <a href="javascript:;" class="volume">
                        <img :src="v.imgurl.replace('{size}','400')">
                        <span v-html="v.specialname"></span>
                        <span v-html="v.username" style="color:#888;font-size: 12px;"></span>
                        <div class="Playvolume"><div style="background: url(http://m.kugou.com/v3/static/images/index/icon_music.png) center center no-repeat;"></div><div style="padding-top: 5px;" v-text="v.playcount"></div></div>
                    </a>
                </div>
            </div>
        </section>
    </div>
</template>
<script>
export default {
  data() {
    return {
      SongRecommend: ""
    };
  },
  components: {},
  created() {
    var that = this;
    that
      .$http({
        url: "/SongRecommend",
        method: "post"
      })
      .then(res => {
        that.SongRecommend = res.data.plist.list.info;
        console.log("SongRecommend:", that.SongRecommend);
        console.log(res.data);
      });
  },
  methods: {
    JumpBum(specialid) {
      console.log(specialid);
      this.$router.push({
        path: "/newSongSheet",
        query: { specialid: specialid }
      });
    }
  }
};
</script>
<style scoped>
#list,
#list li,
#list li a,
.mui-table-view:before,
.mui-table-view-cell:after,
.mui-table-view:after {
  background-color: transparent;
  border: 0px;
}

.table {
  display: flex;
  flex-wrap: wrap;
  margin: 0px 5px;
}

.table div {
  width: 47%;
  margin: 0px 1.5% 6px;
}

.table div a {
  display: flex;
  flex-direction: column;
}

.table div img {
  width: 100%;
  margin-bottom: 5px;
}

.table div span {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
  color: #c5c5c5;
  padding: 0 8px 0px 0px;
}
.volume {
  position: relative;
}
.Playvolume {
  position: absolute;
  bottom: 36px;
  left: -8px;
  display: flex;
  color: #fff;
}
</style>
